<template>
    <ul class="Navigation_ul">
        <li>
            <router-link tag="div" to="/Rank">
                <span class="link_item">排行</span>
            </router-link>
        </li>
        <li>
            <router-link tag="div" to="/Recommend">
                <span class="link_item">推荐</span>
            </router-link>
        </li>
        <li>
            <router-link tag="div" to="/Singer">
                <span class="link_item">歌手</span>
            </router-link>
        </li>
        <li>
            <router-link tag="div" to="/search">
                <span class="link_item">搜索</span>
            </router-link>
        </li>
    </ul>
</template>
<style scoped lang='less'>
    .Navigation_ul{
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: center;
        font-size: 16px;
        li{
            width: 25%;
            text-align: center;
            line-height: 40px;
            color: #f6dacf;
            .router-link-active{
                .link_item{
                    color: #ffffff;
                    border-bottom: 2px solid #ffffff;
                    box-sizing: border-box;
                }    
            }
            .link_item{
                margin: 0 auto;
                display: block;
                height: 40px;
                width: 50px;
                text-align: center;
                line-height: 30px;
            }
        }
    }
    
</style>

